<template>
  <div class="notice-container">
    <div class="container">
      <div class="row">
        <h1>{{ seller.name }}</h1>
        <div class="title">
          <div class="line"></div>
          <h2>优惠信息</h2>
          <div class="line"></div>
        </div>
        <div v-if="seller.supports">
          <div class="info"><img src="../resource/img/decrease_2@2x.png" alt=""><span>{{ seller.supports[0].description
              }}</span></div>
          <div class="info"><img src="../resource/img/discount_2@2x.png" alt=""><span>{{ seller.supports[1].description
              }}</span></div>
          <div class="info"><img src="../resource/img/discount_2@2x.png" alt=""><span>{{ seller.supports[2].description
              }}</span></div>
          <div class="info"><img src="../resource/img/special_2@2x.png" alt=""><span>{{ seller.supports[3].description
              }}</span></div>
          <div class="info"><img src="../resource/img/special_2@2x.png" alt=""><span>{{ seller.supports[4].description
              }}</span></div>
        </div>
        <div class="title">
          <div class="line"></div>
          <h2>商家公告</h2>
          <div class="line"></div>
        </div>
        <h3>{{ seller.bulletin }}</h3>
      </div>
    </div>
    <div class="icon-close" @click="close">
    </div>
  </div>
</template>

<script>
const ERR_OK = 0
export default {
  name: 'NoticeView',
  data () {
    return {
      seller: []
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.$http.get('http://localhost:8081/api/seller').then(res => {
        // console.log(res.body.errno)
        // 异步请求数据，渲染界面要先v-if判断是否有数据嘞
        if (res.body.errno !== ERR_OK) return
        this.seller = res.body.data
      })
    },
    close () {
      this.$emit('appfunc')
    }
  }
}

</script>

<style lang="scss" scoped>
  .notice-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 17, 27, .85);
    overflow: scroll;
    z-index: 1000;

    .container {
      height: 100%;

      .row {
        padding: 1.12rem 0.6rem 0 0.6rem;
        color: #fff;
        height: 85%;
        overflow: scroll;

        h1 {
          font-size: 0.5rem;
          font-weight: 700;
          line-height: 0.64rem;
          text-align: center;
        }

        .title {
          padding: 0.6rem 0;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .line {
            width: 2rem;
            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
          }

          h2 {
            font-size: 0.38rem;
          }
        }

        .info {
          padding: 0.12rem 0.24rem;

          img {
            display: inline-block;
            width: 0.32rem;
            height: 0.32rem;
            vertical-align: middle;
          }

          span {
            padding-left: 0.12rem;
            font-size: 0.28rem;
            font-weight: 200;
            color: #fff;
            line-height: 0.24rem;
            display: inline-block;
            vertical-align: middle;
          }
        }

        h3 {
          padding: 0 0.24rem;
          font-size: 0.3rem;
          font-weight: 200;
          color: #fff;
          line-height: 0.48rem;
        }
      }
    }

    .icon-close {
      position: fixed;
      bottom: 0.1rem;
      left: 0;
      width: 100%;
      font-size: 0.64rem;
      text-align: center;
      color: rgba(255, 255, 255, .5);
    }

  }

</style>
